<template>
	<view>
		<u-navbar class="custom-header" back-text="返回" title="采购退货" height="44" :custom-back="backToList">
			<view slot="right"><u-button type="primary" size="mini" style="margin-right: 20rpx;" @click="handleSave">保存</u-button></view>
		</u-navbar>
		<view class="text">退货单基本信息</view>
		<uni-card>
			<u-form labelPosition="left" :model="form" ref="uForm" label-width="200rpx">
				<u-form-item label="退货单号:" prop="rtCode" borderBottom>
					<u-input v-model="form.rtCode" placeholder="保存后系统自动生成" :border="border"></u-input>
					<u-switch v-model="checked" @change="changeStatus"></u-switch>
				</u-form-item>
				<u-form-item label="退货单名称:" prop="rtName" borderBottom><u-input v-model="form.rtName" placeholder="请输入退货单名称" :border="border"></u-input></u-form-item>
				<u-form-item label="供应商:" prop="vendorName" borderBottom>
					<u-input v-model="form.vendorName" placeholder="请选择供应商" :border="border" type="select" @click="show1 = true"></u-input>
					<u-select v-model="show1" :list="supplieList" value-name="vendorId" label-name="vendorName" @confirm="confirm1"></u-select>
				</u-form-item>
				<u-form-item label="采购订单号:" prop="poCode" borderBottom><u-input v-model="form.poCode" placeholder="请输入采购订单号" :border="border"></u-input></u-form-item>
				<u-form-item label="批次号:" prop="batchCode" borderBottom><u-input v-model="form.batchCode" placeholder="请输入批次号" :border="border"></u-input></u-form-item>
				<u-form-item label="退货日期:" prop="rtDate" borderBottom>
					<u-input v-model="form.rtDate" placeholder="请选择日期" :border="border" type="select" @click="show2 = true"></u-input>
					<u-picker v-model="show2" mode="time" :params="params" @confirm="confirm2"></u-picker>
				</u-form-item>
			</u-form>
		</uni-card>
		<view v-if="rtId != null">
			<u-gap height="20" bg-color="#dedede"></u-gap>
			<view class="text">退货单明细信息</view>
			<u-row gutter="32" justify="center">
				<u-col span="10">
					<view><u-button type="success" @click="handleAdd(rtId)">新增</u-button></view>
				</u-col>
			</u-row>
			<uni-list>
				<uni-list-item v-for="(workReport, index) in workList" :key="index">
					<template slot="body">
						<uni-card is-full class="uni-list-card" padding="0" spacing="0">
							<view class="list-item-content">
								<view class="list-item-body">
									<view class="item-label">物料编码：</view>
									<view class="u-line-1 item-value">{{ workReport.itemCode }}</view>
								</view>
								<view class="list-item-body">
									<view class="item-label">物料编码：</view>
									<view class="u-line-1 item-value">{{ workReport.itemName }}</view>
								</view>
								<view class="list-item-body">
									<view class="item-label">单位：</view>
									<view class="u-line-1 item-value">{{ workReport.unitOfMeasure }}</view>
								</view>
								<view class="list-item-body">
									<view class="item-label">入库位置：</view>
									<view class="u-line-1 item-value">{{ workReport.warehouseName + '-' + workReport.locationName + '-' + workReport.areaName }}</view>
								</view>
								<view class="list-item-body">
									<view class="item-label">入库数量：</view>
									<view class="u-line-1 item-value">{{ workReport.quantityRecived }}</view>
								</view>
								<view class="flex-botton">
									<!-- <u-button class="btn btn1" type="primary" size="mini" @click="handleUpdate(workReport)">修改</u-button> -->
									<u-button class="btn" type="primary" size="mini" @click="handleDelete(workReport)">删除</u-button>
								</view>
							</view>
						</uni-card>
					</template>
				</uni-list-item>
			</uni-list>
			<!-- <u-row gutter="32" class="bottom-box" justify="center">
				<u-col span="10">
					<view><u-button type="primary" shape="circle" @click="navTo('/pages/sys/home/index')">提交</u-button></view>
				</u-col>
			</u-row> -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				vendorNick: null,
				poCode: null,
				rtDate: null,
				updateBy: null,
				status: null,
				vendorName: null,
				batchCode: null,
				searchValue: null,
				vendorId: null,
				rtId: null,
				createBy: null,
				vendorCode: null,
				attr1: null,
				attr4: null,
				rtName: null,
				updateTime: null,
				createTime: null,
				remark: null,
				attr3: null,
				attr2: null,
				params: {},
				rtCode: null
			},
			// 表单验证
			rules: {
				rtCode: [
					{
						required: true,
						message: '请输入退货单号',
						trigger: ['change', 'blur']
					}
				],
				rtName: [
					{
						required: true,
						message: '请输入退货单名称',
						trigger: ['change', 'blur']
					}
				],
				rtDate: [
					{
						required: true,
						message: '请选择退货单日期',
						trigger: ['change', 'blur']
					}
				]
			},
			border: false,
			show: false,
			show1: false,
			show2: false,
			checked: true,
			// 供应商参数
			param: {
				pageNum: 1,
				pageSize: 10
			},
			supplieList: [], //供应商列表
			//时间选择器参数
			params: {
				year: true,
				month: true,
				day: true
			},
			rtId: null, //退货单ID
			lineId: null, //退货单明细ID
			workList: [], //退货单明细列表
			content: '是否确认删除该退货单？'
		};
	},
	onLoad(options) {
		//判断是否修改
		if (options.params != undefined) {
			this.rtId = options.params;
			this.getList();
		}
		this.getSupplie();
		this.changeStatus(true);
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		//开关触发事件
		changeStatus(status) {
			if (status == true) {
				this.$u.api.getAutoCode({ ruleCode: 'WM_RTVENDOR_CODE' }).then(res => {
					console.log(res);
					this.form.rtCode = res;
				});
			} else {
				this.form.rtCode = null;
			}
		},
		getList() {
			const rtId = this.rtId;
			this.$u.api.buyReturn
				.getBuyReturnDetail({ rtId })
				.then(res => {
					this.form = res.data;
				})
				.catch(err => {
					console.log(err);
				});
			this.$u.api.buyReturn
				.getBuyReturnListLine({ rtId })
				.then(res => {
					this.workList = res.rows;
				})
				.catch(err => {
					console.log(err);
				});
		},
		handleSave() {
			console.log('rtId:', this.rtId);
			this.$refs.uForm.validate(valid => {
				if (valid) {
					if (this.rtId == null) {
						this.$u.api.buyReturn
							.handleBuyReturnAdd(this.form)
							.then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '新增成功',
										duration: 1000
									});
									this.backToList();
								}
							})
							.catch(err => {
								console.log(err);
							});
					} else {
						this.$u.api.buyReturn
							.handleBuyReturnUpdata(this.form)
							.then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '修改成功',
										duration: 1000
									});
									this.backToList();
								}
							})
							.catch(err => {
								console.log(err);
							});
					}
				} else {
					console.log('验证失败');
				}
			});
		},
		// 获取供应商
		getSupplie() {
			this.$u.api.supplie.getSupplieList(this.param).then(res => {
				console.log(res);
				this.supplieList = res.rows;
			});
		},
		//供应商选择
		confirm1(e) {
			console.log(e);
			this.form.vendorName = e[0].label;
			this.form.vendorId = e[0].value;
		},
		//时间选择
		confirm2(e) {
			console.log(e);
			this.form.rtDate = e.year + '-' + e.month + '-' + e.day;
		},
		// 新增
		handleAdd(data) {
			console.log(data);
			uni.navigateTo({
				url: '/pages/sys/home/components/work_bench/buy-return/buy_return_add'
			});
			let id = data;
			uni.setStorageSync('rtId', id);
		},
		// 修改
		// handleUpdate(row) {
		// 	const ID = {
		// 		rtId: row.rtId,
		// 		lineId: row.lineId
		// 	};
		// 	uni.navigateTo({
		// 		url: '/pages/sys/home/components/work_bench/buy-return/buy_return_add?params=' + JSON.stringify(ID)
		// 	});
		// },
		//删除
		handleDelete(val) {
			console.log(val);
			uni.showModal({
				title: '提示',
				content: '是否确认删除',
				success: res => {
					if (res.confirm) {
						console.log('用户点击确定');
						this.$u.api.buyReturn
							.handleBuyReturnDeleteLine({ lineIds: val.lineId })
							.then(res => {
								if (res.code === 200)
									uni.showToast({
										title: '删除成功',
										duration: 1000,
										icon: 'none'
									});
								this.getList();
							})
							.catch(err => {
								console.log(err);
							});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//返回列表
		backToList() {
			uni.navigateTo({
				url: '/pages/sys/home/components/work_bench/buy-return/buy_return_list'
			});
		}
	}
};
</script>

<style scoped lang="scss">
.text {
	font-weight: bold;
	text-align: center;
	margin: 20rpx 0;
}
.item-card-title-layout {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin: 0 20rpx;
	padding: 20rpx 0;
	border-bottom: 1px solid rgb(214, 215, 217);

	.item-card-title {
		font-size: 32rpx;
		color: #5a5a5a;
	}

	.item-card-status {
		padding: 5rpx 8rpx;
		font-size: 26rpx;
		color: #fff;

		&.status-1 {
			background-color: #9a9998;
		}

		&.status-2 {
			background-color: #f9ae3d;
		}

		&.status-3 {
			background-color: #3c9cff;
		}

		&.status-4 {
			background-color: #5ac725;
		}
		&.status-5 {
			background-color: #f56c6c;
		}
	}
}

.list-item-content {
	padding: 20rpx;
	border-bottom: 1px solid rgb(214, 215, 217);

	.list-item-body {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		line-height: 56rpx;

		.item-label,
		.item-value {
			color: #6a6a6a;
			font-size: 28rpx;
		}
	}
}
.card-actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	.card-actions-item {
		font-size: 25rpx;
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		&.withdraw {
			color: #f56c6c;
		}
		&.division {
			border-right: 1px solid rgb(214, 215, 217);
		}
	}
}
.flex-botton {
	display: flex;
	justify-content: flex-end;
}
.btn {
	margin: 0;
}
.btn1 {
	margin-right: 20rpx;
}
</style>
